<template>
<Modal :mask-closable="false" v-model="showInsert" @on-visible-change="(e) => {!e && haddleCancel()}" :width="700" title="文件导入" :footer-hide=true :draggable="true">
        <p>一、请按照数据模板的格式准备要导入的数据。<a :href="downLoadUrl">点击下载《导入模板》</a></p>
        <p class="ivu-mt-8 ivu-mb-8">二、请选择你需要导入的文件。</p>
        <Upload
            multiple
            type="drag"
            :action="upLoadUrl"
            accept=".xls,.xlsx"
            :before-upload="handleBeforeUpload"
            :on-error="handleUploadError">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>将文件拖拽到此处，或点击上传</p>
                <small>仅支持上传扩展名为xls.xlsx的文件</small>
            </div>
        </Upload>  
        <div v-if="file !== null"> {{ file.name }}</div>
         <div slot="footer" style="text-align:right;">
            <Button type="default" @click="haddleCancel" >取消</Button>
            <Button type="primary" @click="ok" :loading="loadingUpload" style="margin-left:10px;">确定</Button>
        </div>   
    </Modal>
</template>  
<script>
    import Setting from "@/setting"
    import util from "@/libs/util"
    import {uploadExecl} from '@api/selecttopic.js'
    export default {
        name: 'insert',
        props:["showInsert"],
        data () {
            return {
                upLoadUrl:Setting.request.apiBaseURL +'/v1/buss/target-content/upload-execl?auth_access_token='+util.cookies.get("token"),
                downLoadUrl: Setting.request.apiBaseURL +'/v1/buss/target-content/download-tmp-execl?auth_access_token='+util.cookies.get("token"),
                loadingUpload:false,
                file:null,
                controller:null
            }
        },
        methods:{
            handleBeforeUpload(file){
               this.file = file;
                return false;
            },
            handleUploadError (error, file, fileList) {
                this.$Message.error(error)
                this.loadingUpload=false
            },
            haddleCancel(){
                if(this.controller){
                    this.controller.abort()
                }
                this.$emit('closeTopicModal', false);
                this.file=null
            },
            ok(){                
                if(this.file==null){
                    this.$Message.error('请选择上传文件')
                    return;
                }
                if(this.file.size>2*1024*1024*1024){
                     this.$Message.error('文件大小不能超过2G')
                     return false;
                }
                this.loadingUpload=true
                this.controller = new AbortController(); 
                uploadExecl({file:this.file},this).then(()=>{
                    this.loadingUpload=false
                    this.file=null
                    this.$Message.success('上传成功')
                    this.$emit('closeTopicModal', false,'add')
                }).catch(()=>{
                    this.loadingUpload=false
                })
            }
        }
    } 
</script>